<template>
  <div class="center">
    <!-- 使用抽离的搜索组件 -->
    <SearchBar @search="loadData" />
    <div v-if="isSearching">
      <div class="bot3">
        <div class="card" v-for="(items, index) in itemData" :key="index">
          <a :href="'/shop/detail?id=' + items.id">
            <div class="image-box">
              <img :src="items.image" alt="商品图" />
            </div>
            <div class="info">
              <p class="name"><i class="tag">推荐</i>{{ items.sellPoint }}</p>
              <span class="shangping" style="color: blue">1111</span>
              <div class="price">
                <i>¥</i><span>{{ items.price }}</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div v-else>
      <Lunbo />
      <div class="bottom">
        <div class="bot1">
          <div class="left-box">
            <div class="le-1">
              <div class="left-side">
                <div class="text-box">每日特价</div>
                <div class="circle-icon">&gt;</div>
              </div>
              <div class="right-side">
                <div
                  class="tab-item"
                  :class="{ active: activeName === 'beauty' }"
                  @mouseenter="changeTab('beauty')"
                >
                  美妆
                </div>
                <div
                  class="tab-item"
                  :class="{ active: activeName === 'daily' }"
                  @mouseenter="changeTab('daily')"
                >
                  日用品
                </div>
              </div>
            </div>
            <div class="le-2">
              <!-- 美妆 -->
              <div v-show="activeName === 'beauty'">
                <div class="le-21">
                  <div class="product-image">
                    <div class="imgs">
                      <img :src="firstBeautyData.image" alt="" />
                    </div>
                    <div class="title">{{ firstBeautyData.sellPoint }}</div>
                    <div class="price">￥{{ firstBeautyData.price }}</div>
                  </div>
                  <div class="product-info">
                    <div
                      class="info-item"
                      v-for="(item, index) in beautyData"
                      :key="index"
                    >
                      <div class="img-box">
                        <img :src="item.image" alt="商品图" />
                      </div>
                      <div class="content-box">
                        <p class="top-content">{{ item.sellPoint }}</p>
                        <p class="bottom-content">￥{{ item.price }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 日用品 -->
              <div v-show="activeName === 'daily'">
                <div class="le-21">
                  <div class="product-image">
                    <div class="imgs">
                      <img :src="firstDailyData.image" alt="" />
                    </div>
                    <div class="title">{{ firstDailyData.sellPoint }}</div>
                    <div class="price">￥{{ firstDailyData.price }}</div>
                  </div>
                  <div class="product-info">
                    <div
                      class="info-item"
                      v-for="(item, index) in dailyData"
                      :key="index"
                    >
                      <div class="img-box">
                        <img :src="item.image" />
                      </div>
                      <div class="content-box">
                        <p class="top-content">{{ item.sellPoint }}</p>
                        <p class="bottom-content">￥{{ item.price }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="le-1">
              <div class="left-side">
                <div class="text-box">优惠推荐</div>
                <div class="circle-icon">&gt;</div>
              </div>
              <div class="right-side">
                <div
                  class="tab-item"
                  :class="{ active: activeName1 === 'd' }"
                  @mouseenter="changeTab1('d')"
                >
                  家电家具
                </div>
                <div
                  class="tab-item"
                  :class="{ active: activeName1 === 's' }"
                  @mouseenter="changeTab1('s')"
                >
                  数码
                </div>
              </div>
            </div>
            <div class="le-2">
              <!-- 家电 -->
              <div v-show="activeName1 === 'd'">
                <div class="le-21">
                  <div class="product-image">
                    <div class="imgs">
                      <img :src="firstApplianceData.image" alt="" />
                    </div>
                    <div class="title">{{ firstApplianceData.sellPoint }}</div>
                    <div class="price">￥{{ firstApplianceData.price }}</div>
                  </div>
                  <div class="product-info">
                    <div
                      class="info-item"
                      v-for="(item, index) in applianceData"
                      :key="index"
                    >
                      <div class="img-box">
                        <img :src="item.image" />
                      </div>
                      <div class="content-box">
                        <p class="top-content">{{ item.sellPoint }}</p>
                        <p class="bottom-content">￥{{ item.price }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 数码 -->
              <div v-show="activeName1 === 's'">
                <div class="le-21">
                  <div class="product-image">
                    <div class="imgs">
                      <img :src="firstDigitalData.image" alt="" />
                    </div>
                    <div class="title">{{ firstDigitalData.sellPoint }}</div>
                    <div class="price">￥{{ firstDigitalData.price }}</div>
                  </div>
                  <div class="product-info">
                    <div
                      class="info-item"
                      v-for="(item, index) in digitalData"
                      :key="index"
                    >
                      <div class="img-box">
                        <img :src="item.image" alt="商品图" />
                      </div>
                      <div class="content-box">
                        <p class="top-content">{{ item.sellPoint }}</p>
                        <p class="bottom-content">￥{{ item.price }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bot2">
          <div class="left-box2">
            <div class="le-1">
              <div class="left-side">
                <div class="text-box">逛好店</div>
                <div class="circle-icon">&gt;</div>
              </div>
            </div>
            <div class="inner-box">
              <div class="item-box">
                <div class="item-bo1">
                  <div class="it-text">家电店铺</div>
                  <div class="spam">
                    <span class="spanms">推荐</span>
                    <span class="spanmss">好物</span>
                  </div>
                  <div class="cours">0关注</div>
                </div>
                <div class="item-bo2">
                  <img :src="firstApplianceData.image" alt="" />
                </div>
              </div>
              <div class="item-box1">
                <div class="item-bo1">
                  <div class="it-text">美食店铺</div>
                  <div class="spam">
                    <span class="spanms">推荐</span>
                    <span class="spanmss">好物</span>
                  </div>
                  <div class="cours">12关注</div>
                </div>
                <div class="item-bo2">
                  <img :src="hamburgUrl" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="l-box2">
            <div class="le-1">
              <div class="left-side">
                <div class="text-box">时尚达人</div>
                <div class="circle-icon">&gt;</div>
              </div>
            </div>
            <div class="carousel-wrapper">
              <button class="nav-btn left" @click="prevSlide">‹</button>
              <div class="carousel-track">
                <div
                  v-for="(item, index) in fashionistaData"
                  :key="index"
                  class="carousel-card"
                  :class="getCardClass(index)"
                >
                  <img :src="item.image" />
                  <div v-if="index === activeIndex" class="card-info">
                    <h3>{{ item.title }}</h3>
                    <p class="desc">{{ item.description }}</p>
                    <p class="price">￥{{ item.price }}</p>
                  </div>
                </div>
              </div>
              <button class="nav-btn right" @click="nextSlide">›</button>
            </div>
          </div>
          <div class="r-box2">
            <div class="le-1">
              <div class="left-side">
                <div class="text-box">进口好物</div>
                <div class="circle-icon">&gt;</div>
              </div>
            </div>
            <div class="biao">美妆</div>
            <div class="dan_1">
              <div
                class="item_dan"
                v-for="(items, index) in beautyDataAll"
                :key="index"
              >
                <img :src="items.image" class="dan_item-left" />
                <div class="dan_item-right">
                  <span>{{ items.title }}</span>
                  <div class="dan_right_y">
                    <p>￥</p>
                    <span>{{ items.price }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-box2">
            <div class="le-1">
              <div class="left-side" style="width: 200px">
                <div class="text-box">先领券再下单</div>
                <div class="circle-icon">&gt;</div>
              </div>
            </div>
            <div class="biao">数码加点</div>
            <div class="dan_1">
              <div
                class="item_dan"
                v-for="(items, index) in digitalDataAll"
                :key="index"
              >
                <img :src="items.image" class="dan_item-left" />
                <div class="dan_item-right">
                  <span>{{ items.title }}</span>
                  <div class="dan_right_y">
                    <p>￥</p>
                    <span>{{ items.price }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bot">人气推荐</div>
        <div class="bot3">
          <div class="card" v-for="(items, index) in itemShopData" :key="index">
            <a :href="'/shop/detail?id=' + items.id">
              <div class="image-box">
                <img :src="items.image" alt="商品图" />
              </div>
              <div class="info">
                <p class="name"><i class="tag">推荐</i>{{ items.sellPoint }}</p>
                <div class="price">
                  <i>¥</i><span>{{ items.price }}</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBar from "./components/search.vue";
import request from "@/utils/request";
import Lunbo from "./components/lunbo.vue";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  name: "ShopView",
  components: {
    SearchBar,
    Lunbo,
  },
  computed: {
    ...mapState("item", [
      "firstDailyData",
      "dailyData",
      "firstBeautyData",
      "beautyData",
      "firstApplianceData",
      "applianceData",
      "firstDigitalData",
      "digitalData",
      "itemShopData",
      "digitalDataAll",
      "beautyDataAll",
      "fashionistaData",
    ]),
    ...mapGetters("user", ["isLogin", "user"]),
  },
  data() {
    return {
      isSearching: false, // 是否搜索中
      searchResults: [], // 搜索结果数据
      activeName: "beauty",
      activeName1: "d",
      // 查询的关键词
      search: "",
      // 收到的商品数据
      itemData: [],
      activeIndex: 0,
      items: [
        {
          image:
            "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          title: "商品1这是商品1的简介",
          description: "这是商品1的简介",
          price: "99.00",
        },
        {
          image:
            "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          title: "商品2这是商品2的简介",
          description: "这是商品2的简介",
          price: "149.00",
        },
        {
          image:
            "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          title: "商品3这是商品3的简介",
          description: "这是商品3的简介",
          price: "79.00",
        },
      ],
      timer: null,
      // 汉堡Url
      hamburgUrl:
        "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
    };
  },
  created() {
    this.fetchItemData();
  },
  methods: {
    ...mapActions("item", ["fetchItemData"]),
    loadData(searchKeyword) {
      this.search = searchKeyword || "";
      this.isSearching = true;
      request
        .get("/item/getAll", {
          params: {
            search: this.search,
          },
        })
        .then((res) => {
          this.itemData = res.data;
        });
    },
    resetToHome() {
      this.isSearching = false;
    },
    changeTab(name) {
      this.activeName = name;
    },
    changeTab1(name) {
      this.activeName1 = name;
    },
    startAutoPlay() {
      this.timer = setInterval(() => {
        this.nextSlide();
      }, 4000);
    },
    nextSlide() {
      this.activeIndex = (this.activeIndex + 1) % this.items.length;
    },
    prevSlide() {
      this.activeIndex =
        (this.activeIndex - 1 + this.items.length) % this.items.length;
    },
    getCardClass(index) {
      const prev =
        (this.activeIndex - 1 + this.items.length) % this.items.length;
      const next = (this.activeIndex + 1) % this.items.length;

      if (index === this.activeIndex) return "active";
      if (index === prev) return "prev";
      if (index === next) return "next";
      return "hidden";
    },
  },
  mounted() {
    this.startAutoPlay();
    console.log("是否登录：", this.isLogin);
    console.log("用户数据", this.user);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.title {
  font-size: 15px;
}

.title:hover {
  color: #ff5000;
}

.info-wrapper .sellPoint {
  display: inline-block;
  height: 46px;
  margin: 6px 0 2px 0;
  overflow: hidden;
  color: #333;
  font-size: 10px;
  line-height: 23px;
}

.info-wrapper .sellPoint:hover {
  color: #ff5000;
}

.image {
  width: 100%;
  height: 223px;
}

.bot {
  margin: 20px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-weight: bold;
  font-size: 32px;
  color: #525151;
}

.center {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f9f9f9;
}

.bottom {
  width: 1400px;
  margin: 10px auto;
  flex: auto;
  height: 100%;
  position: relative;
}

.bot1 {
  display: flex;
  height: 360px;
  justify-content: space-between;
  align-items: start;
}

.bot2 {
  margin-top: 40px;
  display: flex;
  height: 360px;
  justify-content: space-between;
  align-items: start;
}

.left-box,
.right-box {
  height: 360px;
  width: 695px;
  background-color: #fff;
}

.le-1 {
  height: 66px;
  background-color: #fff;
  position: relative;
}

.le-2 {
  height: 290px;
}

.left-box2,
.l-box2,
.r-box2 {
  background-color: #fff;
  margin-right: 10px;
  height: 360px;
  width: 342.5px;
}

.right-box2 {
  height: 360px;
  width: 342.5px;
  background-color: #fff;
}

.bot3 {
  display: flex;
  height: 100%;
  width: 1400px;
  margin: 40px auto;
  flex-wrap: wrap;
  gap: 10px;
}

.card {
  width: 272px;
  height: 374px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s;
  flex-shrink: 0;
  /* 防止被压缩 */
}

.card a {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

.image-box {
  width: 100%;
  height: 240px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-box img {
  width: 190px;
  height: 190px;
  object-fit: cover;
}

.info {
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.info .name {
  height: 60px;
  font-size: 14px;
  margin-bottom: 6px;
}

.tag {
  font-size: 12px;
  color: #f40;
  margin-right: 5px;
}

.info .price {
  margin-bottom: auto;
  height: 30px;
  color: #ff5000;
  font-weight: bold;
  font-size: 16px;
}
price {
  height: 30px;
  color: #ff5000;
  font-weight: bold;
  font-size: 16px;
}
.left-side {
  gap: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  position: absolute;
  font-weight: 700;
  font-size: 24px;
  left: 20px;
  height: 100%;
  width: 150px;
}

.inner-box {
  margin: 0 20px 20px 20px;
  height: 270px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #fff;
}

.item-box,
.item-box1 {
  height: 130px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.item-box {
  background-image: url("@/assets/images/lv.png");
}

.item-box1 {
  background-image: url("@/assets/images/fen.png");
}

.item-bo2 img {
  cursor: pointer;
  height: 100px;
  width: 100px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.item-bo1 {
  width: 120px;
  height: 120px;
}

.it-text {
  height: 38px;
  line-height: 16px;
  font-size: 16px;
  color: #333;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  cursor: pointer;
}

.it-text:hover {
  color: #f40;
}

.spam {
  margin-top: 5px;
}

.spanms,
.spanmss {
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  border-radius: 2px;
  padding: 0 2px;
  height: 24px;
  line-height: 24px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid transparent;
  margin-right: 5px;
  display: inline-block;
}

.spanms {
  color: #596fab;
  border-color: #596fab;
}

.spanmss {
  color: #e2231a;
  border-color: #e2231a;
}

.cours {
  color: #999;
  font-size: 14px;
  margin-top: 20px;
  cursor: pointer;
}

.item-bo2 {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-side {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #999;
  position: absolute;
  right: 20px;
  height: 100%;
  width: 150px;
}

.tab-item {
  margin-left: 20px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid transparent;
}

.tab-item.active {
  font-weight: bold;
  border-color: #ff5000;
  color: #ff5000;
}

.le-21 {
  margin: 0 20px 20px 20px;
  height: 270px;
  display: flex;
  gap: 20px;
  /* 两个盒子之间的间距 */
}

.product-image {
  width: 230px;
  height: 270px;
  background-color: #eee;
}

.imgs {
  width: 100%;
  height: 160px;
}

.imgs img {
  margin-top: 40px;
  margin-left: 20px;
  height: 120px;
  width: 120px;
  object-fit: cover;
}

.title {
  font-size: 16px;
  color: #333;
  word-break: break-word;
}

.price {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #e91e63;
  margin-top: 6px;
}

.product-info {
  width: 100%;
  height: 270px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
  box-sizing: border-box;
}

.info-item {
  width: 200px;
  height: 110px;
  display: flex;
}

.img-box {
  margin-top: 5px;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.img-box img {
  width: 90px;
  height: 90px;
  object-fit: cover;
}

.content-box {
  margin-top: 5px;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
}

.top-content {
  color: #333;
  height: 40px;
  font-size: 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示两行 */
  -webkit-box-orient: vertical;
}

.bottom-content {
  font-size: 18px;
  font-weight: 700;
  color: #c81623;
}

.circle-icon {
  width: 20px;
  height: 20px;
  border: 1px solid red;
  border-radius: 50%;
  background-color: #fff;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.circle-icon:hover {
  background-color: red;
  color: #fff;
}
.biao {
  margin-left: 30%;
  height: 20px;
  width: 50px;
  background-color: #ff5000;
  color: #fff;
  border-radius: 20px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}
.item_dan {
  height: 70px;
  width: 90%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.dan_1 {
  height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* ✅ 隐藏滚动条（适配各浏览器） */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  gap: 20px;
  overflow-y: auto;
  align-items: center;
  padding: 10px 0;
}
.dan_1::-webkit-scrollbar {
  display: none; /* Chrome、Safari、Edge */
}
.dan_item-left {
  width: 70px;
  height: 70px;
}

.dan_item-right {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.dan_item-right span {
  margin: 0;
  font-size: 16px;
  color: #333;
}
.dan_right_y {
  display: flex;
  flex-direction: row;
}
.dan_right_y span {
  color: #ff5000;
}
.dan_item-right p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #ff5000;
}
</style>
<style scoped>
.carousel-wrapper {
  position: relative;
  width: 320px;
  height: 300px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

.carousel-track {
  position: relative;
  height: 100%;
}

.carousel-card {
  position: absolute;
  top: 0;
  width: 60%;
  height: 100%;
  left: 20%;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s ease;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.carousel-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card-info {
  padding: 10px;
  background: #fff;
  flex: 1;
  box-sizing: border-box;
}

.card-info h3 {
  margin: 5px 0;
  font-size: 16px;
}

.card-info .desc {
  font-size: 13px;
  color: #666;
  margin: 5px 0;
}

.card-info .price {
  font-size: 16px;
  color: #e91e63;
  font-weight: bold;
}

.active {
  transform: scale(1.1);
  opacity: 1;
  z-index: 3;
}

.prev {
  transform: translateX(-101%) scale(0.8);
  opacity: 0.6;
  z-index: 2;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
.next {
  transform: translateX(101%) scale(0.8);
  opacity: 0.6;
  z-index: 2;
}

.hidden {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s;
}

.nav-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.nav-btn.left {
  left: 10px;
}

.nav-btn.right {
  right: 10px;
}
</style>
